<template>
  <view class="doctor-list" v-cloak>
    <view class="list-header" v-if="false">
      <image :src="selectStore.logo" mode="aspectFill" class="header-img"></image>
      <view class="header-info">
        <view class="box-flex">
          <view class="info-title">
            <h2>{{selectStore.name}}</h2>
            <uni-rate size="14" :value="selectStore.score"></uni-rate>
          </view>
          <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons>
        </view>
        <view class="info-p">
          <view>{{selectStore.orgIndustry}}</view>
          <view class="box-flex">
            <image class="icon" src="@/static/position-green.png" mode="aspectFill"></image>
            {{selectStore.distance}}
          </view>
        </view>
      </view>
    </view>
    <view class="list-main" v-if="doctorList.length">
      <view class="list-item" v-for="(item,idx) in doctorList" :key="idx" @click="handleToDetail(item)">
        <image :src="item.avatar || '../static/doctor-default.png'" mode="aspectFill" class="item-img"></image>
        <view class="item-info">
          <h2>{{item.realName}} 
       <!--   <image class="info-icon" src="@/static/doctor/verify.png" mode="aspectFill"></image> <image class="info-icon" src="@/static/doctor/add-home.png" mode="aspectFill"></image><span>{{item.jobTitle}}</span> -->
          </h2>
          <view class="info-p">{{item.jobTitle}}<span style="color: #B0B0B0; font-size: 22rpx;margin: 0 8rpx">|</span> 从业{{item.workYear}}年 
            <!-- 服务人数{{item.serviceNumber}} -->
          </view>
          <!-- <view class="info-store dot">{{selectStore.name}}</view> -->
          <view class="info-footer">{{item.introduction}}</view>
        </view>
      </view>
    </view>
    <view class="var-empty" v-else>
      <view class="p">暂无数据</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        capsuleInfo:uni.getMenuButtonBoundingClientRect() || {},
        selectStore:uni.getStorageSync('selectStore'),
        doctorList:[],
        searchKey:''
      };
    },
    onLoad() {
      uni.showLoading({
        title:'加载中'
      })
      this.$get('/merchant/v1/staff/selectStaffByJob',{
        orgId:this.selectStore.id,
        positionCode:'doctor'
      },'1').then(res=>{
        this.doctorList = res.content
      })
    },
    methods:{
      handleBack(){
        uni.navigateBack()
      },
      handleSearch(){
        if(this.searchKey.trim()){
          
        }
      },
      handleToDetail(e){ ///  医师详情
        uni.navigateTo({
          url:`/mainPackage/doctor-detail?id=${e.id}`
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.doctor-list{
  min-height: 100vh;
  background: var(--page-bg);
  .list-header{
    display: flex;
    border-bottom: 2rpx solid #F6F6F6;
    padding: 20rpx 24rpx 32rpx;
    .header-img{
      width: 148rpx;
      height: 148rpx;
      margin-right: 24rpx;
      border-radius: 8rpx;
    }
    .header-info{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .box-flex{justify-content: space-between;}
      .info-title{
        font-size: 26rpx;
        color: var(--title-color);
        font-weight: bold;
        h2{margin-bottom: 12rpx;}
      }
      .info-p{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 22rpx;
        color: var(--sub-title);
        .box-flex{
          align-items: center;
          .icon{
            width: 26rpx;
            height: 26rpx;
            margin-right: 6rpx;
          }
        }
      }
    }
  }  // list-header end
  .list-main{
    padding: 24rpx;
  }
  .list-item{
    display: flex;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .item-img{
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
    .item-info{
      flex: 1;
      .info-icon{
        width: 32rpx;
        height: 33rpx;
        margin:0 10rpx;
      }
      h2{
        font-size: 28rpx;
        color: var(--title-color);
        font-weight: bold;
        display: flex;
        align-items: center;
        span{
          line-height: 1;
          font-weight: 400;
          font-size: 18rpx;
          padding: 6rpx 14rpx;
          color: var(--theme-color);
          background: #F0FDFA;
          border-radius: 32rpx;
          margin-left: 6rpx;
          border: 2rpx solid #D9F4F2;
        }
      }
      .info-p{
        font-size: 22rpx;
        font-weight: bold;
        margin: 12rpx 0;
        color: var(--title-color);
      }
      .info-store{
        font-size: 22rpx;
        margin: 12rpx 0;
        color: #6D6D6D;
      }
      .info-footer{
        color: var(--sub-title);
        font-size: 22rpx;
        line-height: 33rpx;
      }
    }
  }
}
</style>
